<!DOCTYPE html>
<div>
<head>
    <title>产品基础信息关系表</title>
    <#include "/header.html">
</head>
<div>
<div id="rrapp" v-cloak >
    <div v-show="showList">
        <div class="grid-btn">
            <el-form :inline="true" size="mini" >
                <el-form-item label="分类">
                    <el-input v-model="qParams.categoryName" placeholder="分类"></el-input>
                </el-form-item>
                <el-form-item label="部件">
                    <el-input v-model="qParams.partsName"  placeholder="部件"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-search" @click="query" circle></el-button>
                </el-form-item>
                <div style="float: right; padding-right: 20px">
                    <#if shiro.hasPermission("quoteProduct:quoteproductbaseinfo:save")>
                        <a class="btn btn-primary btn-sm" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>
                    </#if>
                    <#if shiro.hasPermission("quoteProduct:quoteproductbaseinfo:update")>
                        <a class="btn btn-primary btn-sm" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
                    </#if>
                </div>
            
            </el-form>

        </div>

        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>
    </div>


<!--弹框内容-->
<div>
    <el-dialog
            title="选择"
            :visible.sync="goodsCategoryDialogVisible"
            show-close="false"
            width="40%"
            >
        <div class="el-form-item">
            <label class="el-form-item__label" style="width: 80px;">商品分类</label>
            <div class="el-form-item__content" style="margin-left: 80px;">
                <el-cascader style="width: 90%"
                             v-model="categoryIds"
                             :options="categoryTree"
                             @change="categoryChange">
                </el-cascader>
            </div>
        </div>
        <div class="el-form-item">
            <label class="el-form-item__label" style="width: 80px;">部件</label>
            <div class="el-form-item__content" style="margin-left: 80px;">
                <el-select style="width: 90%" v-model="partsId" placeholder="请先选择分类" @change="partsChange">
                    <el-option
                            v-for="item in parts"
                            :key="item.id"
                            :label="item.partsName"
                            :value="item.id">
                    </el-option>
                </el-select>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button  @click="categoryTreeClose">取 消</el-button>
            <el-button type="primary" @click="showAttribute">确 定</el-button>
        </span>
    </el-dialog>
</div>

<!--属性选项-->
<div v-show="!showList" class="panel panel-default" >
    <div class="panel-heading" style="font-size: 16px">{{title}} <span >{{categoryName}} -> {{partsName}}</span></div>
    <div style="padding: 10px;padding-left: 20px; text-align:center">

        <button type="button" style="width: 100px;" v-if="title=='新增'"  @click="generateProductTemplate" class="btn  btn-primary btn-sm"><i class="fa fa-check"></i>&nbsp;生成模板</button>
        <button type="button" style="width: 100px;"  v-if="title=='修改'" @click="updateProductTemplate" class="btn  btn-primary btn-sm"><i class="fa fa-check"></i>&nbsp;更新模板</button>
        <button type="button" style="margin-left: 30px;width: 100px"  @click="reload" class="btn  btn-default btn-sm"><i class="fa fa-arrow-left"></i>&nbsp;返回</button>
    </div>
    <div class="panel-heading">普通属性选项</div>
    <div style="padding: 10px">
        <el-table border stripe ref="normalAttributeOptionTable" :data="normalAttributeOptionList"
                  tooltip-effect="dark" size="mini" height="450px">
            <el-table-column type="selection" label="选择" width="55"></el-table-column>
            <el-table-column prop="attributeName" label="属性名称"  width="100"></el-table-column>
            <el-table-column label="选项名称"  >
                <template slot-scope="scope">
                    <el-select  multiple placeholder="请选择"  style="width: 100%"
                                v-model="scope.row.normalSelectedOptionList"
                                @change="changeAttributeValue(scope.row)"
                        >
                        <el-option
                                v-for="item in scope.row.normalOptionList"
                                :key="item.id"
                                :label="item.optionName"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column label="默认选择"   width="260">
                <template slot-scope="scope">
                    <el-select   placeholder="请选择"  style="width: 100%"   v-model="scope.row.normalDefaultOption">
                        <el-option
                                v-for="item in scope.row.normalSelectedTempOptionList"
                                :key="item.id"
                                :label="item.optionName"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>

        </el-table>
    </div>

    <div class="panel-heading" >材料属性选项</div>

    <div style="margin-top: 25px; padding-left: 35px" >
        <div class="el-form-item">
            <label class="el-form-item__label" style="width: 80px;">默认克重</label>
            <div class="el-form-item__content" style="margin-left: 80px;">
                <el-select  placeholder="请选择选项" v-model="materialDefaultOption" @change="materialDefaultOptionChange">
                    <el-option
                            v-for="item in materialDefaultOptionList"
                            :key="item.optionKey"
                            :label="item.optionName"
                            :value="item.optionKey">
                    </el-option>
                </el-select>
                <el-select  placeholder="请选择克重" v-model="materialDefaultOptionName2">
                    <el-option
                            v-for="item in materialDefaultOptionName2List"
                            :key="item.id"
                            :label="item.optionName2"
                            :value="item.id">
                    </el-option>
                </el-select>
            </div>
        </div>

    </div>

    <el-table border stripe ref="materialAttributeOptionTable" :data="materialAttributeOptionList"
              tooltip-effect="dark" size="mini" height="450px" @select="materialSelected">
        <el-table-column type="selection" label="选择" width="55"></el-table-column>
        <el-table-column prop="optionName" label="选项名称"  width="100"></el-table-column>
        <el-table-column label="克重"  >
            <template slot-scope="scope">
                <el-select  multiple placeholder="请选择"  style="width: 100%"
                            v-model="scope.row.materialSelectedOptionList"
                >
                    <el-option
                            v-for="item in scope.row.materialOptionList"
                            :key="item.id"
                            :label="item.optionName2"
                            :value="item.id">
                    </el-option>
                </el-select>
            </template>
        </el-table-column>

    </el-table>

</div>

</div>
<script src="${request.contextPath}/statics/js/modules/quoteProduct/quoteproductbaseinfo.js?_${.now?long}"></script>
</body>
</html>